<template>
	<swiper 
		:indicator-dots="true" 
		:autoplay="true" 
		:interval="3000" 
		:duration="1000" 
		:circular="true"
		indicator-active-color="#ffffff"
		class="header-swiper"
	>
		<swiper-item class="swiper-slide" v-for="item in list" :key="item.disID">
			<image  class="swiper-img" :src="item.path"  mode="aspectFill"></image>
		</swiper-item>
	</swiper>
</template>

<script>
	export default {
		name: 'v-swiper',
		props: {
			list: Array
		}
	}
</script>

<style lang="scss" scoped>
	@import "../../common/scss/_common.scss";
	.header-swiper {
		height: ws(200);
			.swiper-slide {
				position: relative;
				&::after {
					content: '';
					position: absolute;
					z-index: 1;
					top: 0;
					bottom: 0;
					left: 0;
					right: 0;
					background: linear-gradient(rgba(#fff, .4), rgba(#000, 0));
				}
				.swiper-img {
					width: 100%;
					height: 100%;
					object-fit: cover;
				}
			}
		}
</style>
